<template>
  <view class="template-remain-evaluated tn-safe-area-inset-bottom">
    <view :style="{ height: vuex_custom_bar_height + 'px' }" class="tn-navbg">
      <!-- 顶部自定义导航 -->
      <tn-nav-bar alpha customBack fixed>
        <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
          <text class='icon tn-icon-left'></text>
          <text class='icon tn-icon-home-capsule-fill'></text>
        </view>
        <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
          <text class="tn-text-bold tn-text-xl tn-color-black">待评价</text>
        </view>
      </tn-nav-bar>
    </view>
    
    <!-- 内容 -->
    <view class="content-container">
      <block v-if="orderList.length > 0">
        <!-- 订单列表 -->
        <view 
          v-for="(order, index) in orderList" 
          :key="index"
          class="order-item"
        >
          <!-- 左侧信息：订单编号、平台名称、时间 -->
          <view class="order-left">
            <view class="order-number-box">
              <text class="order-number">订单编号：{{ order.projectId }}</text>
              <text class="copy-icon tn-icon-copy" @click="copyOrderNumber(order.projectId)"></text>
            </view>
            <text class="platform-name">{{ order.title }}</text>
            <text class="order-date">{{ order.createTime }}</text>
          </view>
          
          <!-- 右侧信息：状态、金额、操作按钮 -->
          <view class="order-right">
            <text class="order-status">已结束</text>
            <text class="order-amount">¥{{ order.totalPrice }}</text>
            <view 
              class="action-button" 
              :class="{ 'modify': order.orderPayStatus === 1 }"
              @click="goToEvaluate(order)"
            >
              {{ order.orderPayStatus === 1 ? '修改评价' : '去评价' }}
            </view>
          </view>
        </view>
      </block>
      
      <!-- 空状态 -->
      <view v-else class="empty-state">
        <view class="empty-icon tn-icon-flower-fill"></view>
        <view class="empty-text">暂无待评价订单</view>
      </view>
    </view>
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import { getCustomReviewsList } from '@/api/index.js'

export default {
  name: 'RemainEvaluated',
  mixins: [template_page_mixin],
  data() {
    return {
      // 待评价订单列表
      orderList: []
    }
  },
  onLoad() {
    // 页面加载时获取待评价订单列表
    this.getRemainEvaluatedOrders()
  },
  methods: {
    // 获取待评价订单列表
    getRemainEvaluatedOrders() {
      getCustomReviewsList().then(res => {
        console.log(res)
        if (res && res.data) {
          this.orderList = res.data
        } else {
          this.orderList = []
        }
      }).catch(err => {
        console.error('获取待评价订单列表失败', err)
        this.orderList = []
      })
    },
    
    // 复制订单号
    copyOrderNumber(orderNumber) {
      uni.setClipboardData({
        data: orderNumber,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success',
            duration: 2000
          })
        }
      })
    },
    
    // 前往评价页面
    goToEvaluate(order) {
      uni.navigateTo({
        url: `/minepages/orderEvaluation?orderNumber=${order.projectId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #FFFFFF;
  }
}

/* 页面容器样式 */
.template-remain-evaluated {
  min-height: 100vh;
  background-color: #F8F8F8;
  position: relative;
  z-index: 0;
}

/* 内容区域 */
.content-container {
  padding: 20rpx;
  margin-bottom: 40rpx;
}

/* 订单项样式 */
.order-item {
  background-color: #FFFFFF;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
  display: flex;
  justify-content: space-between;
}

/* 左侧内容样式 */
.order-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

/* 右侧内容样式 */
.order-right {
  display: flex;
  flex-direction: column;
  align-items: center; 
  padding-left: 20rpx;
}

/* 订单号样式 */
.order-number-box {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.order-number {
  font-size: 26rpx;
  color: #666666;
}

.copy-icon {
  margin-left: 10rpx;
  color: #999999;
  font-size: 26rpx;
}

/* 平台名称样式 */
.platform-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
  padding: 24rpx 0;
}

/* 订单日期样式 */
.order-date {
  font-size: 24rpx;
  color: #999999;
}

/* 订单状态样式 */
.order-status {
  font-size: 24rpx;
  color: #666666;
  background-color: rgba(75, 123, 245, 0.2);
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  margin-bottom: 10rpx;
}

/* 订单金额样式 */
.order-amount {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  padding: 24rpx 0;
}

/* 操作按钮样式 */
.action-button {
  display: inline-block;
  background-color: #4080FF;
  color: #FFFFFF;
  font-size: 26rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  text-align: center;
}

.action-button.modify {
  background-color: #FFD100;
  color: #333333;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-icon {
  font-size: 100rpx;
  color: #DDDDDD;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}
</style>
